import { initShaders } from '@/lib/webgl'
export default class {
    constructor (el, datas, vertexCount, matrix, depthEnable = false, offsetEnable = false) {
        const styles = window.getComputedStyle(el, null)
        el.width = parseInt(styles.width)
        el.height = parseInt(styles.height)
        const gl = el.getContext('webgl2')
        if (depthEnable) {
            gl.enable(gl.DEPTH_TEST)
        }
        if (offsetEnable) {
            gl.enable(gl.POLYGON_OFFSET_FILL)
        }

        // 顶点着色器
        const VSHADER_SOURCE = `
            attribute vec4 a_Position;
            attribute vec4 a_Color;
            uniform mat4 u_Matrix;
            varying vec4 v_Color;
            void main() {
                gl_Position = u_Matrix * a_Position;
                v_Color = a_Color;
            }
        `
        const FSHADER_SOURCE = `
            precision mediump float;
            varying vec4 v_Color;
            void main() {
                gl_FragColor = v_Color;
            }
        `
        if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
            console.log('init shader error')
            return
        }
        const initVertexBuffers = (gl) => {
            const vertexAndColorDatas = new Float32Array(datas)
            const n = vertexCount
            // 创建缓冲区
            const verticeColorBuffer = gl.createBuffer()
            if (!verticeColorBuffer) {
                return -1
            }
            // 将缓冲区对象绑定到目标
            gl.bindBuffer(gl.ARRAY_BUFFER, verticeColorBuffer)
            // 向缓冲区对象中写入数据
            gl.bufferData(gl.ARRAY_BUFFER, vertexAndColorDatas, gl.STATIC_DRAW)
            const eleSize = vertexAndColorDatas.BYTES_PER_ELEMENT

            const aPosition = gl.getAttribLocation(gl.program, 'a_Position')
            gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 6 * eleSize, 0)
            gl.enableVertexAttribArray(aPosition)

            const aColor = gl.getAttribLocation(gl.program, 'a_Color')
            gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 6 * eleSize, 3 * eleSize)
            gl.enableVertexAttribArray(aColor)
            return n
        }
        // 设置顶点位置
        const n = initVertexBuffers(gl)
        if (n < 0) {
            console.log('initVertexBuffers failed')
            return
        }

        // 设置视图/变换矩阵
        const uMatrix = gl.getUniformLocation(gl.program, 'u_Matrix')
        gl.uniformMatrix4fv(uMatrix, false, matrix)

        gl.clearColor(0.0, 0.0, 0.0, 1.0)
        if (depthEnable) {
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
        } else {
            gl.clear(gl.COLOR_BUFFER_BIT)
        }
        if (offsetEnable) {
            gl.polygonOffset(1.0, 1.0)
        }
        gl.drawArrays(gl.TRIANGLES, 0, n)

        this.gl = gl
        this.el = el
        this.vertexCount = vertexCount
        this.depthEnable = depthEnable
        this.img = el.toDataURL('image/png')
    }

    redraw (matrix) {
        const gl = this.gl
        const el = this.el
        const uMatrix = gl.getUniformLocation(gl.program, 'u_Matrix')
        gl.uniformMatrix4fv(uMatrix, false, matrix)
        if (this.depthEnable) {
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
        } else {
            gl.clear(gl.COLOR_BUFFER_BIT)
        }

        gl.drawArrays(gl.TRIANGLES, 0, this.vertexCount)
        this.img = el.toDataURL('image/png')
    }
}